$(() => {
    const getinfo = () => {
        ajax('GET', BigNew.comment_info, {}, (res) => {
            // {
            //     "totalArticle": 225,
            //     "dayArticle": 20,
            //     "totalComment": 8000,
            //     "dayComment": 36
            // }
            const htmlStr = template('Comment', res)
            $('.spannel_list').html(htmlStr)


        })
    }


    // 业务2：折线图(面积图)
    const chartLine = (arr1, arr2) => {
        // 存放图表的容器
        const chartDom = document.getElementById('curve_show')
        // 初始化图表
        const myChart = echarts.init(chartDom)
        // 图表配置
        const option = {
            // 标题配置
            title: {
                left: 'center',
                text: '文章日新增趋势',
            },
            // 图表大小配置
            grid: {
                left: '5%',
                right: '5%',
                bottom: '50px',
            },
            // 颜色配置
            color: [
                // 渐变色
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'gold', // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: 'red', // 100% 处的颜色
                        },
                    ],
                    global: false, // 缺省为 false
                },
            ],
            // x轴
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: arr1,
            },
            // y轴
            yAxis: {
                type: 'value',
            },
            // 图表集
            series: [
                {
                    // 数据
                    data: arr2,
                    // 折线图
                    type: 'line',
                    // 开启平滑
                    smooth: true,
                    areaStyle: {},
                },
            ],
        }
        // 如果有配置，按照配置生成图表
        option && myChart.setOption(option)
    }



    // 请求数据回来渲染
    const getLineData = () => {
        let arr1 = []
        let arr2 = []
        ajax('GET', BigNew.comment_article, {}, (res) => {
            arr1 = res.date.map(item => item.date)
            arr2 = res.date.map(item => item.count)
            chartLine(arr1, arr2)
        })

    }

    // 饼图
    const piechart = (obj) => {
        let chartDom = document.getElementById('pie_show');
        let myChart = echarts.init(chartDom);
        let option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['30%', '60%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,

                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: true
                    },
                    data: obj
                }
            ]
        };


        option && myChart.setOption(option);
    }


    const getCategory = () => {
        ajax('GET', BigNew.comment_category, {}, (res) => {
            console.log(res);
            const obj = res.date.map(item => { return { value: item.articles, name: item.name } })
            console.log(obj);
            piechart(obj)
        })
    }


    // 柱状图
    const bar = (arr1, arr2) => {
        const chartDom = document.getElementById('column_show');
        const myChart = echarts.init(chartDom);
        const option = {
            xAxis: {
                type: 'category',
                data: arr1
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: arr2,
                    type: 'bar',
                    barWidth: 50
                }
            ]
        };

        option && myChart.setOption(option);
    }

    const getvisit = () => {
        let arr1 = []
        let arr2 = []
        ajax('GET', BigNew.comment_visit, {}, (res) => {
            console.log(res);
            // for (const key in res.data) {
            //     console.log(key, res.data[key]);
            //     arr1.push(key)
            //     arr2.push(res.data[key])
            // }
            // arr1 = Object.keys(res.data)
            // arr2 = Object.keys(res.data)
            arr1 = Object.keys(res.data)
            arr2 = Object.values(res.data)
            bar(arr1, arr2)
        })
    }
    getvisit()

    getinfo()
    getLineData()
    getCategory()




})